<template>
  <div class="USelect">
    <el-select
      :value="formValue"
      @input="input"
      v-bind="$attrs"
    >
      <el-option
        v-for="option in $attrs.options || []"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'USelect',
  props: {
    formValue: {
      type: String | Number,
      default: () => ''
    }
  },
  methods: {
    input(val) {
      this.$emit('update:formValue', val);

      let row = '';
      if (val instanceof Array) {
        row = this.$attrs.options.filter(item => val.includes(item.value));
      } else {
        row = this.$attrs.options.filter(item => item.value == val)[0];
      }

      console.log(row);
      this.$emit('change', val, row);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>